Once you have developed your style sheet, previewed it in browsers to make sure that it works well, you now need to apply it to your web site.
Style sheets can be applied to web sites in one of two ways:
In this chapter we will look at linking web pages to style sheets, embedding style sheets in web pages, and editing style sheets embedded in HTML documents.
Linking is the preferred way of applying a style sheet to a web page, for reasons we will be looking at shortly.
When a web page is linked to a style sheet, the style sheet remains completely independent from the HTML document. A special kind of link, placed in the HEAD of an HTML document, informs a browser reading the web page that there is a style sheet that should be used when drawing the web page, and where to locate it.
To link a web page to a style sheet using Style Master
firstly, make sure that the style sheet you want to link to is the front style sheet in Style Master
1. choose from the menu
the open dialog box opens
2. locate the web page you want to link to this style sheet, and click
Style Master places a special link in the head of the HTML document you choose. If the web page is already linked to a style sheet, Style Master replaces the link.
The HTML document is not affected in any other way. No other part of the HTML is altered.
Rather than linking a web page, you can embed the style sheet into the head of a HTML document. The contents of the style sheet are placed inside a special Style element in the Head of the HTML document
To embed a style sheet in the Head of a HTML document
firstly, make sure that the style sheet you want to link to is the front style sheet in Style Master
1. choose from the menu
the open dialog box opens
2. locate the web page you want to embed this style sheet in, and click open
Style Master places the contents of the style sheet in the head of the HTML document, in a Style element. If a style sheet is already embedded in the document, Style Master replaces that style sheet.
The HTML document is not affected in any other way. No other part of the HTML is altered.
To change the style of web sites using linked style sheets, you can simply edit the style sheet, and every page linked to the style sheet is instantly updated. Where embedding is used to apply style, a change to a style sheet needs to be re-embedded in every page of the web site. This gives rise to problems of versioning- ensuring that every page of a web site is edited to have the new style sheet embedded in place of the old one. It also creates considerably more work.
A further reason why embedded style sheets are best avoided becomes important if you use cascading, background images, or list item images. Each of these is specified by an absolute URL, or a URL relative to the style sheet. If a style sheet is embedded in the web page, then web pages in different folders need different style sheets, because the relative URL for imported style sheets or images will be different in different folder. In large web sites, this creates a lot more work, and potential for confusion.
Once a style sheet is embedded in the HEAD of a HTML document, you can in fact still edit it with Style Master. Style Master lets you open HTML documents, and if there is a style sheet embedded in its head, to edit that as if it were a more common .css file.
To edit a style sheet embedded in the head of an HTML document
1. choose from the menu
2. locate the HTML document to open in the Open dialog box and click
Style Master will ask you whether you want to edit the style sheet in the head of the HTML document
3. click
A style sheet window opens, listing the statements in the style sheet in the head of the HTML document. You edit this style sheet as you would any style sheet using Style Master. When changes are saved, these are saved in the head of the HTML document.